<template>
  <div class="carousel">
    <!-- 轮播图片 -->
    <div v-for="(item, index) in carouselItems" :key="index" class="carousel-item"
      :class="{ 'active': index === currentIndex }">
      <!-- 使用相对路径引用图片 -->
      <img :src="item.image" class="carousel-image" :alt="item.title">
      <div class="carousel-caption">
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
      </div>
    </div>

    <!-- 轮播控制按钮 -->
    <a class="carousel-control prev" @click="prevSlide">&#10094;</a>
    <a class="carousel-control next" @click="nextSlide">&#10095;</a>
  </div>
</template>
  
<script>
export default {
  name: "RkIndexView",
  data() {
    return {
      currentIndex: 0,
      carouselItems: [
        {
          image: require("@/assets/images/image5.jpg"),
          title: "欢迎来到嘉兴南湖学院",
          description: "校园图书馆座位预约系统",
        },
        {
          image: require("@/assets/images/image1.png"),
          title: "",
          description: "嘉兴南湖学院图书馆，位于美丽的南湖之畔，提供舒适的学习环境和丰富的图书资源。我们的藏书涵盖了各个学科领域，旨在满足广大师生的学习和研究需求。图书馆不仅是知识的海洋，也是灵感的源泉。在这里，你可以深入研读专业书籍，也可以享受文学作品带来的愉悦。",
        },
        {
          image: require("@/assets/images/image4.jpg"),
          title: "",
          description: "图书馆内设有专门的自习教室，为同学们提供了一个专注学业、深入研究的理想场所。为了更好地管理自习室的座位，图书馆提供了便捷的在线座位预约系统，同学们可以轻松预约自习室的座位。",
        },
        {
          image: require("@/assets/images/image2.png"),
          title: "校园资讯",
          description: "",
        },
      ],
      timer: null,
      interval: 8000, // 添加轮播时间间隔
    };
  },
  mounted() {
    this.startSlide();
  },
  beforeUnmount() {
    this.clearSlide();
  },
  methods: {
    startSlide() {
      this.timer = setInterval(this.nextSlide, this.interval); // 使用轮播时间间隔
    },
    clearSlide() {
      clearInterval(this.timer);
    },
    prevSlide() {
      this.clearSlide(); // 清除当前计时器
      this.currentIndex = (this.currentIndex - 1 + this.carouselItems.length) % this.carouselItems.length;
      this.startSlide(); // 重新启动计时器
    },
    nextSlide() {
      this.clearSlide(); // 清除当前计时器
      this.currentIndex = (this.currentIndex + 1) % this.carouselItems.length;
      this.startSlide(); // 重新启动计时器
    },
  },
};
</script>
  
  
<style scoped>
/*定义了轮播容器的样式*/
.carousel {
  position: relative;
  height: 100vh;
}

/*定义了每个轮播项的样式 */
.carousel-item {
  display: none;
  transition: opacity 1s;
  text-align: center;
  height: 100%; /* 使轮播项高度占满轮播容器 */
}


/*显示当前轮播项 */
.active {
  display: block;
}

/**定义了轮播图片的样式 */
.carousel-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}


/**定义了轮播项的标题和描述的样式 */
.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}

/**定义了轮播控制按钮的样式 */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 70px;
  cursor: pointer;
  z-index: 3;

}

/**义了左箭头和右箭头的样式 */
.prev {
  left: 10px;
  top: 300px;
}

.next {
  right: 10px;
  top: 300px;
}
</style>
  